{extend name="common/base" /}

{block name="body"} 
<div class="head_box">
    <i class="layui-icon layui-icon-left back" data-btn="backNav"></i>
    <div class="t1">时间线</div>
 </div>
 <main class="main_body">
    <!-- 筛选条件 -->
    <form method="get" action="" class="filter_form layui-form">
        <!-- 吊车筛选 -->
        <div class="layui-inline" style="margin-right: 10px;">
            <!-- <label class="layui-form-label">吊车</label> -->
            <div class="layui-input-inline">
                <select name="crane_id">
                    <option value="">吊车</option>
                    {volist name="cranes" id="crane"}
                        <option value="{$crane.id}" {if input('get.crane_id') == $crane.id}selected{/if}>{$crane.name}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <!-- 时间范围筛选 -->
        <div class="layui-inline">
            <!-- <label class="layui-form-label">时间范围</label> -->
            <div class="layui-input-inline">
                <select name="time_range">
                    <option value="">时间选择</option>
                    <option value="1" {if input('get.time_range') == 1}selected{/if}>1天</option>
                    <option value="7" {if input('get.time_range') == 7}selected{/if}>7天</option>
                    <option value="30" {if input('get.time_range') == 30}selected{/if}>30天</option>
                </select>
            </div>
        </div>
        <!-- 自定义起始时间 -->
        <div class="layui-inline" style="margin-top: 20px;">
            <!-- <label class="layui-form-label">起始时间</label> -->
            <div class="layui-input-inline" style="margin-right: 10px;">
                <input type="text" name="start_date" class="layui-input" id="startDate" value="{:input('get.start_date')}" placeholder="开始时间">
            </div>
            <div class="layui-input-inline">
                <input type="text" name="end_date" class="layui-input" id="endDate" value="{:input('get.end_date')}" placeholder="结束时间">
            </div>
        </div>
        <!-- 筛选按钮 -->
        <div class="layui-inline"  style="margin-top: 20px;margin-left: 10px;">
            <button type="submit" style="border-radius: 5px;height: 35px;line-height: 35px;margin-right: 5px;" class="layui-btn layui-bg-blue layui-btn-sm">筛选</button>
        </div>
    </form>

    <!-- 数据列表 -->
    <div class="times_box" style="margin-top: 30px;">
        {volist name="record_list" id="vo"}
            <div class="item">【{$vo.process.name}】&nbsp;{$vo.plan.produce_no}&nbsp;{$vo.plan.segment_type_no}&nbsp;{$vo.plan.stage.name}&nbsp;{$vo.start_time|strtotime|date="m-d H:i"}-{$vo.end_time|strtotime|date="m-d H:i"}&nbsp;{$vo.circle}分钟</div>
        {/volist}
    </div>

    <button class="layui-btn w100" id="refreshBtn">刷新</button>
</main>


{/block}
{block name="js"}
<script>
    $('.back').click(function(){
        window.location.href = '/index';
    })
  $('#refreshBtn').click(function() {
        location.reload();  // 刷新页面
    });
layui.use(['form', 'laydate', 'util'], function () {
      var form = layui.form;
      var layer = layui.layer;
      var laydate = layui.laydate;
      var util = layui.util;


        // 初始化时间选择器
        laydate.render({
            elem: '#startDate',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm',
            trigger: 'click'
        });

        laydate.render({
            elem: '#endDate',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm',
            trigger: 'click'
        });
    //   // 日期
    //   laydate.render({
    //      elem: '#date',
    //      trigger:'click'
    //   }); 
    //   laydate.render({
    //      elem: '#date1',
    //      trigger:'click'
    //   });
      $("#car_btn").on("click",function(){
        $('.car_change').show();
        })
        $("#closebtn").on("click",function(){
            $('.car_change').hide();
        })
         // 关闭按钮点击事件
    $('#closebtn').click(function() {
        $('#car_change').hide();  // 隐藏 div
    });

    $('.back').click(function(){
      window.location.href = '/index';
   })

    $('.reset').click(function() {
        // 获取当前页面的 URL
        var currentUrl = window.location.href;
        
        // 创建一个 URL 对象
        var url = new URL(currentUrl);
        
        // 获取不带参数的原始路径和主机
        var cleanUrl = url.origin + url.pathname;
        
        // 重定向到没有参数的 URL
        window.location.href = cleanUrl;
    });

    // 提交按钮点击事件
    $('#submitbtn').click(function() {
            // 获取 select 选择的车型 ID
        var carId = $('#carSelect').val();
        var start_time = $('.start_time').val();
        var end_time = $('.end_time').val();

        // 获取当前页面的 URL
        var currentUrl = window.location.href;
        
        // 创建一个 URL 对象
        var url = new URL(currentUrl);

        // 函数用于设置 URL 参数，若为空则移除
        function setUrlParam(param, value) {
            if (value) {
                url.searchParams.set(param, value);  // 设置新参数
            }
            // else 不再移除参数，避免覆盖之前的参数
        }

        // 更新或添加 URL 中的 car_id、start_time、end_time 参数
        setUrlParam('car_id', carId);
        setUrlParam('start_time', start_time);
        setUrlParam('end_time', end_time);

        // 重定向到新的 URL，确保不删除其他现有参数
        var newUrl = url.origin + url.pathname + '?' + url.searchParams.toString();

        // 重定向到新的 URL，刷新页面
        window.location.href = newUrl;
    });

});
 </script>
{/block}

